<template>
     <div class="com-container">
            <div class="com-echart" ref="rank_ref">
                
            </div>
            <ReSize :comName="'rank'"></ReSize>
        </div>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted,watch } from 'vue';
import { getRankDataService } from '@/api/index'
import { markRaw } from 'vue';
import ReSize from './ReSize.vue';
import { useThemeStore } from '@/stores';
const themeStore = useThemeStore()


const chartInstance = ref(null)
const rank_ref = ref(null)
const initChart = () => {
    chartInstance.value = markRaw(echarts.init(rank_ref.value, themeStore.currentTheme))
    //分离option的思想，将数据与其他样式的配置分离开，便于维护
    const initOption = {
        title:{
            text:'地区销售排行',
            left:20,
            top:20
        },
        grid:{
            top:'40%',
            left:'5%',
            right:'5%',
            bottom:'5%',
             containLabel: true  //距离包含坐标轴的文字
        },
        tooltip:{
            
        },
        xAxis:{
            type:'category'
        },
        yAxis:{
            type:'value'
        },
        series:[{
            type:'bar'
        }]

    }
    chartInstance.value.setOption(initOption)
    chartInstance.value.on('mouseover', () => {
        clearInterval(timer.value)
    })
    chartInstance.value.on('mouseout', () => {
        startInterval()
    })
}



const updateChart = () => {
    const colorArr = [
        ['#0BA82C', '#4FF778'],
        ['#2E72BF', '#23E5E5'],
        ['#5052EE', '#AB6EE5']
    ]
   const provinceArr=dataList.value.map(e=>e.name)
   const seriesArr=dataList.value.map(e=>e.value)
    const dataOption = {
        xAxis:{
            data:provinceArr
        },
        dataZoom:{
            show:false,
            startValue:startValue.value,
            endValue:endValue.value,
        },
        series:[{
            data:seriesArr,
            itemStyle:{
                color:arg=>{
                    let targetColor=null
                    if(arg.data>300) targetColor=colorArr[0]
                    else if(arg.data>200) targetColor = colorArr[1]
                   else targetColor = colorArr[2]

                   return  new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: targetColor[0] },
                            { offset: 1, color: targetColor[1] }
                        ]
                    )
                }
            }
        }]
    }
    chartInstance.value.setOption(dataOption)
}



const dataList = ref([])
const getRankData = (ret) => {
    dataList.value = ret
    dataList.value.sort((a,b)=>b.value-a.value )
    updateChart()
    startInterval()
}

const screenAdaptor = () => {
    const titleFontSize = rank_ref.value.offsetWidth / 100 * 3.6
    const adaptOption = {
       title:{
        textStyle:{
            fontSize:titleFontSize
        }
       },
       series:[{
            barWidth:titleFontSize,
            itemStyle:{
                borderRadius: [titleFontSize/2, titleFontSize/2, 0, 0],
            }

       }]
    }
    chartInstance.value.setOption(adaptOption)
    chartInstance.value.resize()
}


const timer = ref(null)
const startValue=ref(0)
const endValue=ref(9)
const startInterval = () => {
    //注意先清除定时器
    if (timer.value) clearInterval(timer)
    timer.value = setInterval(() => {
        startValue.value++
        endValue.value++
        if(endValue.value>=dataList.value.length){
            startValue.value=0
            endValue.value=9
        }
        updateChart()
    }, 2000)
}

SocketService.registerCallBack('rankData', getRankData)

defineExpose({
    screenAdaptor
})

watch(() => themeStore.currentTheme, () => {
    chartInstance.value.dispose()
    initChart()
    updateChart()
    screenAdaptor()
})

onMounted(async () => {
    initChart()
    SocketService.send({
        action: 'getData',
        socketType: 'rankData',
        chartName: 'rank',
        value: ''
    })
    window.addEventListener('resize', screenAdaptor)
    screenAdaptor()
})
onUnmounted(() => {
     clearInterval(timer.value)
    window.removeEventListener('resize', screenAdaptor)
})

</script>

<style scoped>
.com-container{
    position: relative;
}

</style>